<template>
  <div id="ranking-board">
    <div class="ranking-board-title">运行事件统计</div>
    <dv-scroll-ranking-board :config="config" />
  </div>
</template>

<script>
import _ from "lodash";
export default {
  name: "RankingBoard",
  methods: {
    queryData: function () {
      this.axios({
        url: "/alarms_stats/",
        method: "GET",
        responseType: "json",
      }).then((res) => {
        this.config = {
          data: [],
          rowNum: 9,
          sort: 0
        };
        var jsondata = JSON.parse(JSON.stringify(res.data));
        console.log("alarms_stats", jsondata);
        let config_data = {
          data: [],
          rowNum: 9,
          sort: 0
        };
        let _data = [];
        for (let k in jsondata["level_stats"]) {
          _data.push({
            name: '级别:'+k,
            value: jsondata["level_stats"][k],
          });
        }
        config_data.data = config_data.data.concat(
          _.reverse(_.sortBy(_data, "value"))
        );
        console.log('total_slots 1:',config_data.data.length);
        // level stats pushed, next deal status stats
        _data = [];
        for (let k in jsondata["status_stats"]) {
          _data.push({
            name: '状态:'+k,
            value: jsondata["status_stats"][k],
          });
        }
        config_data.data = config_data.data.concat(
          _.reverse(_.sortBy(_data, "value"))
        );
        console.log('total_slots 2:',config_data.data.length);
        // status stats pushed, next deal alarm_type
        _data = [];
        for (let k in jsondata["type_stats"]) {
          _data.push({
            name: '类型:'+k,
            value: jsondata["type_stats"][k],
          });
        }
        let free_slots = 9 - config_data.data.length;
        console.log('free_slots:',free_slots);
        config_data.data = config_data.data.concat(
          _.slice(_.reverse(_.sortBy(_data, "value")),0,
          free_slots)
          
        );
        console.log('total_slots:',config_data.data.length);
        this.config = config_data;
      });
    },
  },
  mounted() {
    const { queryData } = this;

    queryData();

    setInterval(queryData, 30000);
  },
  data() {
    return {
      config: {
        data: [
          // {
          //   name: "日常养护",
          //   value: 55,
          // },
          // {
          //   name: "交通事故",
          //   value: 120,
          // },
          // {
          //   name: "路面",
          //   value: 78,
          // },
          // {
          //   name: "桥通",
          //   value: 66,
          // },
          // {
          //   name: "计日工",
          //   value: 80,
          // },
          // {
          //   name: "路基",
          //   value: 45,
          // },
          // {
          //   name: "交安设施",
          //   value: 29,
          // },
          // {
          //   name: "除雪",
          //   value: 29,
          // },
          // {
          //   name: "绿化",
          //   value: 29,
          // },
        ],
        rowNum: 9,
      },
    };
  },
};
</script>

<style lang="less">
#ranking-board {
  width: 20%;
  box-shadow: 0 0 3px blue;
  display: flex;
  flex-direction: column;
  background-color: rgba(6, 30, 93, 0.5);
  border-top: 2px solid rgba(1, 153, 209, 0.5);
  box-sizing: border-box;
  padding: 0px 30px;

  .ranking-board-title {
    font-weight: bold;
    height: 50px;
    display: flex;
    align-items: center;
    font-size: 20px;
  }

  .dv-scroll-ranking-board {
    flex: 1;
  }
}
</style>
